/**
 * 1 输入框绑定 值改变事件 input事件
 *  1 获取道输入框的值
 *  2 合法性判断
 *  3 检验通过 把输入框的值 发送到后台
 *  4 返回的数据打印到页面上
 * 2 防抖（防止抖动）
 *  0 防抖 一般 输入框中 防止重复输入 重复发送请求
 *  1 节流 一般是用在页面下拉和上拉
 *  1 定义全局的定时器ID
 */


import { request } from "../../request/request.js"

Page({
  data: {
    goods: [],
    isFocus:true,
    inpValue:""
  },
  //全局定时器，用于输入框的防抖,现在的值没有意义
  TimeId: -1,

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  handleInput(e) {
    // 1 获取用户输入的关键值
    const { value } = e.detail;
    // 2 检测合法性
    if (!value.trim()) {
      //值不合法
      this.setData({
        isFocus:true,
        goods:[],
      });
      // 重置定时器，以防输入又删除，还是出现搜索的内容
      clearTimeout(this.TimeId);
      return;
    }

    this.setData({
      isFocus:false
    });
    
    // 3 发送请求，获取数据, 使用定时器(防抖)
    clearTimeout(this.TimeId);    
    this.TimeId = setTimeout(() => {
      this.qrequest(value);   //执行要执行的函数
    }, 1000);//延迟1000毫秒
  },
  // 发送请求，获取搜索列表数据
  async qrequest(query) {
    // 2 发送请求，获取数据
    const res = await request({ url: "/goods/search", data: { query } });
    this.setData({
      goods: res.data.message.goods
    })
  },
  // 用户点击取消按钮
  handleCancel(){
    this.setData({
      isFocus:false,
      goods:[],
      inpValue:""
    });
  }

})